{% extends "base.html" %}
<!--6.1 User profile template-->
{% block app_content %}
<!--7.2 insert avatar image--将原来的user.username替换为表格-->
    <table class="table table-hover">
        <tr vertical-align="top">
            <td width="256px"><img src="{{ user.avatar(128) }}"></td>
            <td><h1>User: {{ user.username }}</h1></td>
<!--7.4 add 2 new fields to user profile template-->
            <td>{% if user.about_me %}<p>{{ user.about_me }}</p>{% endif %}</td>
<!--12.4 Render timestamp with moment.js-->
            <td>{% if user.last_seen %}<p>Last seen on: {{ moment(user.last_seen).format('LLL') }}</p>{% endif %}</td>
            <p>{{ user.followers.count() }} followers, {{ user.followed.count() }} following.</p>
        </tr>
    </table>
<!--6.6 edit prfile link-->
    {% if user == current_user %}
                <p><a href="{{ url_for('edit_profile') }}">Edit your profile</a></p>
        {% elif not current_user.is_following(user) %}
                <p>
                    <form action="{{ url_for('follow', username=user.username) }}" method="post">
                        {{ form.hidden_tag() }}
                        {{ form.submit(value='Follow') }}
                    </form>
                </p>
        {% else %}
            <p>
            <form action="{{ url_for('unfollow', username=user.username) }}" method="post">
                {{ form.hidden_tag() }}
                {{ form.submit(value='Unfollow') }}
            </form>
            </p>
    {% endif %}
    <hr>
    {% for post in posts %}
    <p>
<!--7.2 show avatars for the individual posts--将原来单行显示的内容替换为表格-->
<!--7.3 user avators in posts--将表格替换为include语句-->
    {% include '_post.html' %}
    </p>
    {% endfor %}
<!--10.6 Redesigned pagination links-->
    <nav aria-label="...">
        <ul class="pager">
            <li class="previous{% if not prev_url %} disabled{% endif %}">
                <a href="{{ prev_url or '#' }}">
                    <span aria-hidden="true">&larr;</span> Newer posts
                </a>
            </li>
            <li class="next{% if not next_url %} disabled{% endif %}">
                <a href="{{ next_url or '#' }}">
                    Older posts <span aria-hidden="true">&rarr;</span>
                </a>
            </li>
        </ul>
    </nav>
{% endblock %}